<%@ page import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<%
String path=request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>发型工作室-客户信息管理</title>

<meta name="description"
	content="Dynamic tables and grids using jqGrid plugin" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="../util/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="../util/font-awesome/4.5.0/css/font-awesome.min.css" />

<!-- page specific plugin styles -->
<link rel="stylesheet" href="../util/css/jquery-ui.min.css" />
<link rel="stylesheet" href="../util/css/bootstrap-datepicker3.min.css" />
<link rel="stylesheet" href="../util/css/ui.jqgrid.min.css" />

<!-- text fonts -->
<link rel="stylesheet" href="../util/css/fonts.googleapis.com.css" />

<!-- ace styles -->
<link rel="stylesheet" href="../util/css/ace.min.css"
	class="ace-main-stylesheet" id="main-ace-style" />

<!--[if lte IE 9]>
    <link rel="stylesheet" href="../util/css/ace-part2.min.css" class="ace-main-stylesheet" />
    <![endif]-->
<link rel="stylesheet" href="../util/css/ace-skins.min.css" />
<link rel="stylesheet" href="../util/css/ace-rtl.min.css" />

<!--[if lte IE 9]>
    <link rel="stylesheet" href="../util/css/ace-ie.min.css" />
    <![endif]-->

<!-- inline styles related to this page -->

<!-- ace settings handler -->
<script src="../util/js/ace-extra.min.js"></script>

<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

<!--[if lte IE 8]>
    <script src="../util/js/html5shiv.min.js"></script>
    <script src="../util/js/respond.min.js"></script>
    <![endif]-->
</head>
<body class="no-skin">

	<!-- 头部 -->
	<div id="navbar" class="navbar navbar-default ace-save-state">
		<div class="navbar-container ace-save-state" id="navbar-container">
			<button type="button" class="navbar-toggle menu-toggler pull-left"
				id="menu-toggler" data-target="#sidebar">
				<span class="sr-only">侧边栏</span> <span class="icon-bar"></span> <span
					class="icon-bar"></span> <span class="icon-bar"></span>
			</button>

			<div class="navbar-header pull-left">
				<a href="admin/login.html" class="navbar-brand"> <small>
						<i class="fa fa-leaf"></i> 发型工作室
				</small>
				</a>
			</div>

			<div class="navbar-buttons navbar-header pull-right"
				role="navigation">
				<ul class="nav ace-nav">

					<li class="light-blue dropdown-modal"><a
						data-toggle="dropdown" href="#" class="dropdown-toggle"> <img
							class="nav-user-photo" src="../img/avatars/user.jpg"
							alt="Jason's Photo" /> <span class="user-info"> <small>欢迎您</small>
								Admin
						</span> <i class="ace-icon fa fa-caret-down"></i>
					</a>

						<ul
							class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
							<li><a href="#" data-toggle="modal"
								data-target="#changePassword"> <i class="ace-icon fa fa-cog"></i>
									修改密码
							</a></li>

							<li class="divider"></li>

							<li><a href="<%=basePath %>login/cancellation"> <i
									class="ace-icon fa fa-power-off"></i> 注销
							</a></li>
						</ul></li>
				</ul>
			</div>
		</div>
		<!-- /.navbar-container -->
	</div>

	<!-- 修改密码遮罩层（模态框） -->
	<div class="modal fade" id="changePassword" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 400px;">
			<div class="modal-content">
				<div class="card card-primary">
					<div class="widget-header">
						<h3 class="card-title">修改密码</h3>
					</div>
					<!-- /.card-header -->
					<!-- form start -->
					<form action="<%=basePath %>login/changePassword"
						class="form-horizontal" onsubmit="return changePassword()"
						method="post">
						<table>
							<div class="widget-main">
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right">旧密码</label>

									<div class="col-sm-8">
										<input type="password" class="form-control" id="password"
											name="password" placeholder="请输入当前密码">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right">新密码</label>

									<div class="col-sm-8">
										<input type="password" class="form-control" id="newPassword_1"
											name="newPassword_1" placeholder="请输入新密码">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right">确认密码</label>

									<div class="col-sm-8">
										<input type="password" class="form-control" id="newPassword_2"
											name="newPassword_2" placeholder="请确认新密码">
									</div>
								</div>
							</div>
							<!-- /.card-body -->
							<div class="modal-footer">
								<span style="color: red;" id="span_password"></span>
								<button type="button" class="btn btn-default"
									data-dismiss="modal">关闭</button>
								<button type="submit" id="change" class="btn btn-primary">提交更改</button>
							</div>
						</table>
					</form>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- 头部 -->

	<div class="main-container ace-save-state" id="main-container">
		<script type="text/javascript">
        try{ace.settings.loadState('main-container')}catch(e){}
    </script>

		<!-- 侧边栏 -->
		<div id="sidebar" class="sidebar responsive ace-save-state">
			<script type="text/javascript">
            try{ace.settings.loadState('sidebar')}catch(e){}
        </script>

			<div class="sidebar-shortcuts" id="sidebar-shortcuts">
				<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
					<img src="../img/avatars/user.jpg" alt="" /> <span
						style="font-size: 18px;">AdminAdmin</span>
				</div>

				<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
					<span class="btn btn-success"></span> <span class="btn btn-info"></span>

					<span class="btn btn-warning"></span> <span class="btn btn-danger"></span>
				</div>
			</div>
			<!-- /.sidebar-shortcuts -->

			<ul class="nav nav-list">
				<li class=""><a href="<%=basePath %>clientele/select"> <i
						class="menu-icon fa fa-user"></i> <span class="menu-text">
							客户信息管理 </span>
				</a> <b class="arrow"></b></li>

				<li class=""><a href="<%=basePath %>recharge/select"> <i
						class="menu-icon fa fa-credit-card"></i> <span class="menu-text">
							客户充值 </span>
				</a> <b class="arrow"></b></li>

				<li class=""><a href="<%=basePath %>consumption/select"> <i
						class="menu-icon fa fa-bars"></i> <span class="menu-text">
							客户服务结算 </span>
				</a> <b class="arrow"></b></li>

				<li class=""><a href="#" class="dropdown-toggle"> <i
						class="menu-icon fa fa-users"></i> <span class="menu-text">
							员工管理 </span> <b class="arrow fa fa-angle-down"></b>
				</a> <b class="arrow"></b>

					<ul class="submenu">
						<li class=""><a href="<%=basePath %>typeManagement/select">
								<i class="menu-icon fa fa-caret-right"></i> 员工类型管理
						</a> <b class="arrow"></b></li>

						<li class=""><a href="<%=basePath %>staffManagement/select">
								<i class="menu-icon fa fa-caret-right"></i> 员工信息管理
						</a> <b class="arrow"></b></li>
					</ul></li>

				<li class=""><a href="<%=basePath %>serviceProject/select">
						<i class="menu-icon fa fa-print"></i> <span class="menu-text">
							服务项目管理 </span>
				</a> <b class="arrow"></b></li>

				<li class=""><a href="#" class="dropdown-toggle"> <i
						class="menu-icon fa fa-briefcase"></i> <span class="menu-text">
							统计功能 </span> <b class="arrow fa fa-angle-down"></b>
				</a> <b class="arrow"></b>

					<ul class="submenu">
						<li class=""><a href="<%=basePath %>statistical/salary">
								<i class="menu-icon fa fa-caret-right"></i> 统计工资结算
						</a> <b class="arrow"></b></li>

						<li class=""><a href="statistics.html"> <i
								class="menu-icon fa fa-caret-right"></i> 统计盈收
						</a> <b class="arrow"></b></li>

						<li class=""><a href="<%=basePath %>spending/select"> <i
								class="menu-icon fa fa-caret-right"></i> 支出项目统计
						</a> <b class="arrow"></b></li>
					</ul></li>
			</ul>
			<!-- /.nav-list -->

			<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
				<i id="sidebar-toggle-icon"
					class="ace-icon fa fa-angle-double-left ace-save-state"
					data-icon1="ace-icon fa fa-angle-double-left"
					data-icon2="ace-icon fa fa-angle-double-right"></i>
			</div>
		</div>

		<!-- 侧边栏 -->

		<!-- 主体内容 -->
		<div class="main-content">
			<div class="main-content-inner">
				<div class="breadcrumbs ace-save-state" id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="ace-icon fa fa-home home-icon"></i> <a
							href="admin/login.html">主页</a></li>
						<li><a href="salary.html">统计工资结算</a></li>
						<li class="active">服务记录</li>
					</ul>
					<!-- /.breadcrumb -->
				</div>

				<div class="page-content">
					<div class="page-header">
						<div class="container-fluid">
							<div class="row mb-2">
								<div class="col-sm-6">
									<h1>服务记录页面</h1>
								</div>
							</div>
						</div>
					</div>
					<!-- /.page-header -->

					<div class="row">
						<div class="col-xs-12">
							<div class="card">
								<!-- /.card-header -->
								<div class="card-body">
									<table id="form" class="table table-hover">
										<thead>
											<tr>
												<th>编号</th>
												<th>员工姓名</th>
												<th>员工工号</th>
												<th>消费客户账户</th>
												<th>消费客户姓名</th>
												<th>应付金额</th>
												<th>实付金额</th>
												<th>服务时间</th>
											</tr>
										</thead>
										<tbody>
											<c:forEach items="${listRecord}" var="r">
												<tr>
													<td><c:out value="${r.employeeManage.name}" /></td>
													<td><c:out value="${r.number}" /></td>
													<td><c:out value="${r.username}" /></td>
													<td><c:out value="${r.customer.name}" /></td>
													<td><c:out value="${r.payavle}" /></td>
													<td><c:out value="${r.actuallyPaid}" /></td>
													<td><c:out value="${r.date}" /></td>
												</tr>
											</c:forEach>
										</tbody>
									</table>
								</div>
								<!-- /.card-body -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 编辑员工类型（模态框） -->
		<div class="modal fade" id="edit" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 400px;">
				<div class="modal-content">
					<div class="card card-info">
						<div class="widget-header">
							<h3 class="card-title">修改员工类型</h3>
						</div>
						<!-- /.card-header -->
						<!-- form start -->
						<form class="form-horizontal" onsubmit="return edit()">
							<div class="widget-main">
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right">员工类型</label>

									<div class="col-sm-8">
										<input type="text" class="form-control" id="type" value="">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right">基本工资</label>

									<div class="col-sm-8">
										<input type="text" class="form-control" id="salary" value="">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right">提成比例</label>

									<div class="col-sm-8">
										<input type="text" class="form-control" id="commissionRate"
											value="">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right">加权系数</label>

									<div class="col-sm-8">
										<input type="text" class="form-control" id="WeightingFactor"
											value="">
									</div>
								</div>
							</div>
							<!-- /.card-body -->
							<div class="modal-footer">
								<span style="color: red;" id="span_edit"></span>
								<button type="button" class="btn btn-default"
									data-dismiss="modal">关闭</button>
								<button type="submit" class="btn btn-primary">提交更改</button>
							</div>
						</form>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
		<!-- 主体内容 -->

		<!-- 底部版权信息 -->
		<div class="footer">
			<div class="footer-inner">
				<div class="footer-content">
					<span class="bigger-120"> <span class="blue bolder">发型工作室</span>
						管理系统 &copy; 2018-06-04
					</span>
				</div>
			</div>
		</div>
		<!-- 底部版权信息 -->

		<a href="#" id="btn-scroll-up"
			class="btn-scroll-up btn btn-sm btn-inverse"> <i
			class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
		</a>
	</div>
	<!-- /.main-container -->

	<!-- basic scripts -->

	<!--[if !IE]> -->
	<script src="../util/js/jquery-2.1.4.min.js"></script>

	<!-- <![endif]-->

	<!--[if IE]>
<script src="../util/js/jquery-1.11.3.min.js"></script>
<![endif]-->
	<script type="text/javascript">
    if('ontouchstart' in document.documentElement) document.write("<script src='util/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
	<script src="../util/js/bootstrap.min.js"></script>

	<!-- page specific plugin scripts -->
	<script src="../util/js/bootstrap-datepicker.min.js"></script>
	<script src="../util/js/jquery.jqGrid.min.js"></script>
	<script src="../util/js/grid.locale-en.js"></script>

	<!-- ace scripts -->
	<script src="../util/js/ace-elements.min.js"></script>
	<script src="../util/js/ace.min.js"></script>

	<script>
    //修改密码表单验证
    function changePassword() {
        var oldPassword = document.getElementById('password').value;
        var newPassword_1 = document.getElementById('newPassword_1').value;
        var newPassword_2 = document.getElementById('newPassword_2').value;
        if (oldPassword == ""){
            document.getElementById("span_password").innerHTML='请输入当前密码';
            return false;
        }else if (newPassword_1 == ""){
            document.getElementById("span_password").innerHTML='请输入新密码';
            return false;
        }else if (newPassword_2 == ""){
            document.getElementById("span_password").innerHTML='请输入确认密码';
            return false;
        }else if (newPassword_1 != newPassword_2){
            document.getElementById("span_password").innerHTML='新密码和确认密码不一致';
            return false;
        }
        return true;
    }
</script>
</body>
</html>